<template>
  <div style="display: flex;flex-wrap: wrap; ">
    <div class="app-container" style="width: 700px">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="学号" width="150" prop="studentId"/>
        <el-table-column align="center" label="专业" width="150" prop="majorName"/>
        <el-table-column align="center" label="班级" width="150" prop="className"/>
        <el-table-column align="center" label="姓名" width="150" prop="name"/>
      </el-table>
      <el-pagination
        background layout="prev, pager, next"
        v-show="total > 0"
        :total="total"
        :current-page.sync="queryParams.pageNum"
        :page-size.sync="queryParams.pageSize"
        @current-change="fetchData"
      />
    </div>

    <div class="app-container" style="width: 700px">
      <el-table
        v-loading="listLoading"
        :data="list1"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="学号" width="150" prop="studentId"/>
        <el-table-column align="center" label="课程名" width="150" prop="courseName"/>
        <el-table-column align="center" label="姓名" width="150" prop="studentName"/>
        <el-table-column align="center" label="分数" width="150" prop="sumScore" :formatter="(row, column, cellValue) => Math.round(cellValue)"/>
      </el-table>
      <el-pagination
        background layout="prev, pager, next"
        v-show="total > 0"
        :total="total"
        :current-page.sync="queryParams.pageNum"
        :page-size.sync="queryParams.pageSize"
        @current-change="fetchData"
      />
    </div>

    <div class="app-container" style="width: 700px">
      <el-table
        v-loading="listLoading"
        :data="list2"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="学号" width="150" prop="studentId"/>
        <el-table-column align="center" label="姓名" width="150" prop="studentName"/>
        <el-table-column align="center" label="竞赛名" width="150" prop="competitionName"/>
        <el-table-column align="center" label="类型" width="150" prop="competitionType"/>
        <el-table-column align="center" label="团队成员" width="150" prop="entrants"/>
        <el-table-column align="center" label="奖项" width="150" prop="awards" />
      </el-table>
      <el-pagination
        background layout="prev, pager, next"
        v-show="total > 0"
        :total="total"
        :current-page.sync="queryParams.pageNum"
        :page-size.sync="queryParams.pageSize"
        @current-change="fetchData"
      />
    </div>

    <div class="app-container" style="width: 700px">
      <el-table
        v-loading="listLoading"
        :data="list3"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="课程名" width="150" prop="subName"/>
        <el-table-column align="center" label="姓名" width="150" prop="name"/>
        <el-table-column align="center" label="教师" width="150" prop="teacherName"/>
        <el-table-column align="center" label="评分" width="150" prop="evaScore"/>
        <el-table-column align="center" label="时间" width="150" prop="evaTime" >
          <template slot-scope="scope">
            {{ formatDate(scope.row.evaTime) }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background layout="prev, pager, next"
        v-show="total > 0"
        :total="total"
        :current-page.sync="queryParams.pageNum"
        :page-size.sync="queryParams.pageSize"
        @current-change="fetchData"
      />
    </div>
  </div>


</template>

<script>
import { getData,getScore,getCompetition,getEvaluate } from '@/api/table'
export default {
  //过滤函数
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      total:0,
      list: [],//列表
      list1:[],
      list2:[],
      list3:[],
      queryParams:{
        pageNum:1,
        pageSize:10,
      },
      listLoading: true
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    formatDate(dateString) {
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    fetchData() {
      this.listLoading = true
      getData(this.queryParams).then(response => {
        this.list = response.data.rows
        this.total= response.data.total;
        this.listLoading = false
      })
      getScore(this.queryParams).then(res=>{
        this.list1=res.data.rows
        this.total= res.data.total;
        this.listLoading = false
      })
      getCompetition(this.queryParams).then(res=>{
        this.list2=res.data.rows
        this.total= res.data.total;
        this.listLoading = false
      })
      getEvaluate(this.queryParams).then(res=>{
        this.list3=res.data.rows
        console.log(this.list3)
        this.total=res.data.total
        this.listLoading = false
      })
    }
  }
}
</script>
